<script setup>
import { getSiteIndexBanner, getBannerInfo } from '@/api/home'
import { ref, onMounted } from 'vue'

defineProps({
    opacity: {
        type: Number,
        default: 1
    },
})

const current = ref(0)
const swiperList = ref([])

// type 1: 图片链接地址 2: 视频号 3: 内部页面

// swiper切换事件
async function swiperClick(item) {
    const res = await getBannerInfo(item?.id)
    if (res.data?.type === 2) {
        toVideoAccount(res.data)
    } else {
        if (item?.clickUrl) {
            uni.navigateTo({
                url: `/pages/webview/index?url=${item?.clickUrl}`
            })
        }
    }
}

// 前往视频号/视频
function toVideoAccount(data) {
    if (data.feed_id) {
        wx.openChannelsActivity({
            finderUserName: data?.sph_id,  // 视频号的原始 ID
            feedId: data?.feed_id,      // 具体视频的 ID
            success(res) {
                console.log("跳转成功", res);
            },
            fail(err) {
                console.error("跳转失败", err);
            }
        });
    } else {
        wx.openChannelsUserProfile({
            finderUserName: data.sph_id,  // 视频号的原始 ID
            success(res) {
                console.log("跳转成功", res);
            },
            fail(err) {
                console.error("跳转失败", err);
            }
        });
    }
}



// 获取首页banner图
async function getSiteIndexBannerFn() {
    const res = await getSiteIndexBanner()
    swiperList.value = res.data
}

onMounted(() => {
    getSiteIndexBannerFn()
})
</script>

<template>
    <div class='painting_swiper' :style="{ opacity }">
        <swiper class="swiper" indicator-dots autoplay circular :interval="10000" easing-function="easeInCubic"
            indicator-active-color="#FFF">
            <swiper-item :current="current" class="swiper_item" v-for="item of swiperList" @click="swiperClick(item)"
                :key="item.id">
                <img :src="item?.bannerUrl" mode="aspectFill" class="swiper_img" alt="">
            </swiper-item>
        </swiper>
    </div>
</template>

<style lang='scss' scoped>
.painting_swiper {
    padding: 0 30rpx;

    .swiper {
        height: 306rpx;
        border-radius: 20rpx;
        overflow: hidden;
        box-sizing: border-box;

        .swiper_item {
            height: 100%;

            .swiper_img {
                width: 100%;
                height: 100%;
            }
        }

    }
}
</style>